<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li,
        ol {
            list-style: none;
        }

        .focus {
            width: 850px;
            height: 470px;
            margin: 0 auto;
            /* overflow: hidden; */
            position: relative;

        }

        .focus .pic {
            /* 后续通过js动态来计算 */
            /* width:4250px ; */
            height: 100%;
            /* 方便js 操作让 ul 向左移动 增加定位 */
            position: absolute;
            left: 0;
            top: 0;
        }

        .focus .pic li {
            width: 850px;
            height: 470px;
            float: left;
        }

        .focus .pic li a {
            display: block;
            height: 100%;
        }

        .focus .pic li a img {
            width: 100%;
        }

        .circle {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);

        }

        .circle li {
            width: 16px;
            height: 16px;
            background-color: #fff;
            border-radius: 50%;
            float: left;
            margin: 0 8px;

        }

        .circle li.active {
            background-color: yellow;

        }

        .prev {
            width: 30px;
            height: 60px;
            background-color: rgba(255, 255, 255, 0.6);
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 0 30px 30px 0;
            font-size: 20px;
            line-height: 60px;
            text-align: center;
            display: none;
            cursor: pointer;


        }

        .next {
            width: 30px;
            height: 60px;
            background-color: rgba(255, 255, 255, 0.6);
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 30px 0 0 30px;
            font-size: 20px;
            line-height: 60px;
            text-align: center;
            display: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="focus">
        <ul class="pic">
            <li>
                <a href="#">
                    <img src="imgs/001.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="imgs/002.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="imgs/003.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="imgs/002.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="imgs/004.jpg" alt="">
                </a>
            </li>
        </ul>
        <ol class="circle">
            <!-- <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li> -->
        </ol>
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
    </div>
    <script src="js/animate.js"></script>
    <script>
        // 功能1：鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
        //1.查找节点
        var focus = document.querySelector('.focus');
        var pic = document.querySelector('.pic');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var circle = document.querySelector('.circle');
        var timer1;

        focus.onmouseenter = function () {
            prev.style.display = "block";
            next.style.display = "block";
            clearInterval(timer1);



        };
        focus.onmouseleave = function () {
            prev.style.display = "none";
            next.style.display = "none";

            timer1 = setInterval(function () {
                next.onclick();

            }, 2500)
        };
        //5. 因为小圆点的个数和文档中的图片个数是一致，不是复制过图片后个数
        var picLis = document.querySelectorAll('.pic>li');
        console.log(picLis.length);//5
        for (var i = 0; i < picLis.length; i++) {
            var li = document.createElement('li');
            circle.appendChild(li);
            li.setAttribute('idx', i)

            //6.生成小圆点上增加事件，做出选项卡效果  排它思想
            li.onclick = function () {
                //  //1.先清 所以 active
                //  for(var i=0;i<circle.children.length;i++){
                //      circle.children[i].classList.remove('active')
                //  }
                document.querySelector('.circle>li.active').classList.remove('active')
                //2.  当前项再加active
                this.classList.add('active');
                var idx = this.getAttribute('idx')
                animate(pic, -lisW * idx);

                //9.解决bug  统一下索引号
                cir = idx;
                index = idx;


            }



        }
        circle.children[0].className = 'active';


        //2.克隆图片  第一个li  追加到 ul子元素最后   
        var firstLi = pic.children[0].cloneNode(true);
        pic.appendChild(firstLi);
        // 动态计算一下ul的宽度   找li的宽度  跟 focus一样大
        var lis = document.querySelectorAll('.pic li');

        var lisW = pic.children[0].offsetWidth;
        pic.style.width = lisW * lis.length + 'px';

        //3.点击向右的箭头，整个图片区向左运动   ul
        next.onclick = autochange;
        var index = 0;// 索引号 控制图片
        var cir = 0;// 索引号来控制小圆点
        //11.节流阀
        var flag = true;// 标识 节流阀
        function autochange() {
            if (flag) {
                flag = false;
                // 当走到复制的那一张图时，快速的不做动画，回到第一张，把pic的位置，重新置为0，索引号也置为0
                if (index == lis.length - 1) {
                    index = 0;
                    pic.style.left = 0;
                }
                index++;
                // pic.style.left=-lisW*index+'px';
                animate(pic, -lisW * index, function () {
                    flag = true;// 节流阀 打开   一屏动画走完
                });


                //7.控制小圆点
                cir++;
                if (cir == circle.children.length) {
                    cir = 0
                }
                document.querySelector('.circle>li.active').classList.remove('active')
                //2.  当前项再加active
                circle.children[cir].classList.add('active');

            }
        }
        //4. 点击左边的箭头
        prev.onclick = function () {
            if (flag) {
                flag = false;
                // 当走到第一张图时，快速的不做动画，回到复制好的那一张的位置，把pic的位置，重新置为-index*lisW+'px，索引号也置为lis.length-1
                if (index == 0) {
                    index = lis.length - 1;
                    pic.style.left = -index * lisW + 'px';
                }
                index--;
                // pic.style.left=-lisW*index+'px';
                animate(pic, -lisW * index, function () {
                    flag = true;
                });

                //8.控制小圆点
                cir--;
                if (cir == -1) {
                    cir = circle.children.length - 1
                }
                document.querySelector('.circle>li.active').classList.remove('active')
                //2.  当前项再加active
                circle.children[cir].classList.add('active');
            }


        }

        /* 
         bug    索引号不统一      cir    index
        
         单击向右按钮速度会越来越快  ,单击一次必须等到一张图片走完之后，再触发一下操作
         解决方法  节流    flag =true    false
         
        
        */

        //10. 自动轮播
        timer1 = setInterval(function () {
            next.onclick();

        }, 2500)
    </script>
</body>

</html>